<template>
  <img v-if="imageSrc" :src="imageSrc" :alt="imageKey" />
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
import { useI18n } from "vue-i18n";
import i18Image from "@/locales/i18Image.json"; // 确保路径正确

export default defineComponent({
  props: {
    imageKey: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const i18n = useI18n();
    const imageSrc = computed(() => {
      const images = i18Image[props.imageKey];
      if (images) {
        return images[i18n.locale.value] || images.en; // 默认使用英文图片
      }

      console.error("NOTE: Language pictures not found");
      return null;
    });

    return {
      imageSrc,
    };
  },
});
</script>

<!-- <MatchImage image-key="register" class="loginRegister" /> -->
